<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            width: 100px;
            height: 50px;
            padding: 5px;
            margin: 5px;
        }

        #app {
            position: relative;
            width: 500px;
            height: 500px;
            border: 20px solid green;
            margin: 20px auto;
        }

        #ball {
            position: absolute;
            width: 50px;
            height: 50px;
            border: 5px solid red;
            border-radius: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="ball"></div>
</div>
</body>
<script>
    const app = document.querySelector("#app");
    const ball = document.querySelector("#ball");

    let x = 100;// 记录横向的值
    let y = 100;// 记录纵向的值
    // 横向移动的最大值
    let maxX = app.clientWidth - ball.offsetWidth;
    let maxY = app.clientHeight - ball.offsetHeight;
    let speedX = 3;
    let speedY = 1;
    setInterval(function () {
        x += speedX;
        y += speedY;
        // x是否超过右侧
        if(x>maxX){
            x = maxX;
            speedX *= -1;
        }else if(x<0){
            x=0;
            speedX *= -1;
        }
        if(y>maxY){
            y = maxY;
            speedY *= -1;
        }else if(y<0){
            y=0;
            speedY *= -1;
        }
        ball.style.left = x + "px";
        ball.style.top = y + "px";
    }, 10)
</script>
</html>